<template>
  <el-menu
    :router="true"
    class="el-menu-vertical-demo"
    :default-active="$route.path"
    background-color="#304156"
    text-color="#fff"
    @open="handleOpen"
    @close="handleClose"
    @select="handleSelect"
    :collapse="isCollapse"
  >
    <div class="grid-content">{{isCollapse?'管理':'新子路管理系统'}}</div>

    <el-menu-item index="/operatingCenter"  @click="clickMenu()">
      <i class="iconfont iconyunyingshang"></i>
      <span slot="title" style="font-size:16px;">运营中心</span>
    </el-menu-item>

    <el-submenu v-for="(v,i) in role" :index="v.path" :key="i">
      <template slot="title">
        <i :class="v.icon"></i>
        <span>{{ v.name }}</span>
      </template>
      <el-menu-item-group>
        <el-menu-item
          v-for="(item,index) in v.children"
          :index="v.path+item.path"
          :key="index"
          @click="clickMenu(item)"
        >
          <i :class="item.icon"></i>
          {{ item.name }}
        </el-menu-item>
      </el-menu-item-group>
    </el-submenu>

    <el-menu-item index="/personal"  @click="clickMenu()">
      <i class="iconfont iconyunyingshang"></i>
      <span slot="title" style="font-size:16px;">个人中心</span>
    </el-menu-item>
    
  </el-menu>
</template>

<script>
export default {
  props: ["isCollapse"],
  data() {
    return {
      indexData:"",
      activeIndex2: "1",
      role: JSON.parse(localStorage.getItem("qx")),
      RouterArr: [],
      setting:this.$route.meta,
    };
  },
  created() {
    
    this.GetIndex()
  },
  methods: {
    async GetIndex(){
      // let index = await this.$api.home.indexa()
    },
    
    handleOpen(key, keyPath) {
      // console.log("key1",key);

    },
    handleClose(key, keyPath) {
      // console.log("key2",key);

    },
    handleSelect(key, keyPath) {
      // console.log("key3",key);
    },
    clickMenu(item) {
      this.$emit("clickMenu", item);
      console.log(this.$emit("clickMenu", item));
    }
  }
};
</script>

<style lang="less" scope>
.el-submenu .el-menu-item {
  background: #1f2d3d !important;
}
.el-menu-item-group__title {
  display: none;
}
.grid-content {
  height: 60px;
  line-height: 60px;
  text-align: center;
  color: #fff;
  font-size: 21px;
}

.el-submenu__title {
  font-size: 16px;
}

.iconfont {
  margin-right:5px;
}

.el-menu--collapse {
    overflow: hidden;
}

.el-menu-vertical-demo{
  height:100%;
}
// 去除卡顿
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 260px;
  height: 100%;
}
</style>